<template>
  <div class="user">
    <el-card>
      <h3>角色管理</h3>
      <el-divider></el-divider>
      <div class="userbutton">
        <el-button type="primary" @click="dialogVisible = true">新增</el-button>
        <el-button type="primary" plain @click="delAll">删除</el-button>
        <el-button type="primary" plain>关联用户</el-button>
        <el-button type="primary" plain>启用</el-button>
        <el-button type="primary" plain>禁用</el-button>
      </div>
      <div class="table">
        <el-table
          ref="multipleTable"
          :data="userList"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column align="center" label="序号" width="100" type="index">
          </el-table-column>
          <el-table-column
            prop="name"
            label="角色名称"
            width="150"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="account"
            label="关联人数"
            width="150"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="desc" label="备注" width="300" align="center">
          </el-table-column>
          <el-table-column label="状态" width="200">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.status"
                @change="setUserStatus(scope.row)"
              />
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200" align="center">
            <template slot-scope="scope">
              <el-button
                @click="handleClick(scope.row)"
                type="text"
                size="small"
                >编辑</el-button
              >
              <el-button
                type="text"
                size="small"
                style="color: red"
                @click="del(scope.row._id)"
                >删除</el-button
              >
              <el-button type="text" size="small" @click="skip()"
                >权限设置</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 新增对话框 -->
        <el-dialog
          title="新增"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose"
        >
          <span>
            <el-form
              ref="addForm"
              :rules="rules"
              :model="addForm"
              label-width="80px"
              size="mini"
            >
              <el-form-item label="角色名称" prop="name">
                <el-input v-model="addForm.name"></el-input>
              </el-form-item>
              <el-form-item label="备注" prop="desc">
                <el-input
                  type="textarea"
                  v-model="addForm.desc"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
            </el-form>
          </span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="add()">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </el-card>
        
  </div>
</template>
  
  <script>
export default {
  data() {
    return {
      ruleForm: {},
      departs: [],
      organs: [],
      roles: [],
      rules: {
        name: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
        desc: [{ required: true, message: "请选择部门", trigger: "blur" }],
      },
      addForm: {
        name: "普通用户",
        desc: "只能对自己的目录文件进行操作",
      },
      dialogVisible: false,
      userList: [],
      delall: [],
    };
  },
  created() {},
  mounted() {
    // 角色
    this.getRoleList();
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    // 获取角色数据
    async getRoleList() {
      const { data } = await this.$axios.get("/system/getRoleList");
      console.log(data.data, "55555555");
      this.userList = data.data;
    },
    // 添加角色数据
    add() {
      this.$refs["addForm"].validate((valid) => {
        if (valid) {
          console.log(valid, "aaaaa");
          this.$axios.post("/system/addRole", this.addForm);
          this.getRoleList();
          this.$message.success("角色添加成功"), (this.dialogVisible = false);
        } else {
          console.log("添加失败");
        }
      });
      this.addForm.name = "";
      this.addForm.desc = "";
      this.dialogVisible = false;
    },
    // 修改角色状态
    async setUserStatus(row) {
      await this.$axios.post(`/system/setStatus/${row._id}`, {
        status: row.status,
      });
      this.$message.success("修改成功");
    },
    handleSelectionChange(val) {
      this.delall = val;
    },

    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    async del(scope) {
      await this.$axios.delete("/system/delRole?_id=" + scope);
      this.$message.success("删除成功");
      this.getRoleList();
    },
    // 批量删除角色
    async delAll() {
      const data = await this.$confirm("此操作将永久删除，是否继续？", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).catch((e) => e);
      if (data === "confirm") {
        await this.$axios.post("/system/delRoles", this.delall);
        this.getRoleList();
        this.$message.success("删除成功");
      } else {
        this.$message.info("您取消了删除");
      }
    },
    skip() {
      this.$router.push("/home/setting");
    },
  },
};
</script>
  
  <style scoped>
.user {
  width: 100%;
  height: 100%;
}
.user .userbutton button {
  font-size: 10px;
}
.user .table {
  margin-top: 15px;
}
</style>
  